<template>
	<div class="page">
		<!-- v-model:current-page="query.page"  当前页码 -->
		<!-- v-model:page-size="query.rows"  条数 -->
		<el-pagination 
		v-model:current-page="query.page"
		v-model:page-size="query.limit"
		:page-sizes="[10, 20, 30, 40]"
		:size="size"
		:disabled="disabled" 
		layout="total, sizes, prev, pager, next, jumper" :total="total"
		@size-change="handleSizeChange"
		@current-change="handlePageChange"
		/>
	</div>
</template>

<script lang="ts" setup>
import type { ComponentSize } from 'element-plus'
import { defineProps } from 'vue'
import { ref } from 'vue'
	const prop = defineProps({
		total: {
			type: Number,
			default: 0
		},
		query: {
			type: Object
		}
	})

	const size = ref<ComponentSize>('default')
	const disabled = ref(false)

	// 子传父
	const emit = defineEmits(['sizeChange', 'pageChange'])
	// 切换条数
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
		// 子传父-发送
		emit('sizeChange', val)
	}
	// 切换页码
	const handlePageChange = (val : number) => {
		console.log(`current page: ${val}`)
		// 子传父-发送
		emit('pageChange', val)
	}

</script>

<style lang="scss" scoped></style>